<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
    /* 
    属性选择器 
    作用:可以根据元素的属性或属性值来选取指定元素
    语法:[属性名] 选取含有指定属性的元素
    属性名=“属性值”]选取含有指定属性值元素
    [属性名^=“属性值”]选取属性值以指定内容开头的元素
    [属性名$=“属性值”]选取属性值以指定内容结尾的元素
    [属性名*=“属性值”]选取属性值以包含指定内容的元素
    */
    div {
      width: 350px;
      margin: 0 auto;
      border: 1px solid #b2b2bb;
      padding: 20px;
      overflow: hidden;
    }
    div a {
      float: left;
			display: block;
      width: 60px;
      height: 60px;
      background-color: black;
      color: white;
      text-decoration: none;
      text-align: center;
      line-height: 60px;
      margin: 5px;
      border-radius: 10px;
    }
    a[href$="jpg"] {
      background-color: yellowgreen;
    }
    a[href*="test"] {
      background-color: blueviolet;
    }
    
  </style>
</head>

<body>
	<div class="demo">
		<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
		<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
		<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
		<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
		<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
		<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
		<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
		<a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>
		<a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
		<a href="abd.doc" class="linksitem last" id="last">10</a>
	</div>
</body>

</html>